<script setup lang="ts">
import type { TabItem } from "#ui/types";

interface UTabSlot { item: TabItem, index: number, selected: boolean }
defineProps<{ tabInit: TabItem[] }>();

// watchEffect(() => {
// console.log('links', links.value)
// })
// 点外边

const vueContent = ref<TabItem[]>([{
  label: "Vue",
  icon: "i-vscode-icons:file-type-vue",
  content: "从vue2项目创建到使用vue3对项目进行升级,包括从vuex到pinia, 手把手带你教学",
}]);
const pythonContent = ref<TabItem[]>([{
  label: "Python",
  icon: "vscode-icons:file-type-python",
  content: "系统掌握python的技术要点，不仅让你掌握基础知识，还会带你深入了解高级技术。",
}]);
const tsContent = ref<TabItem[]>([{
  label: "Typescript",
  icon: "i-vscode-icons:file-type-typescript-official",
  content: "前端工程师都在用的Vue3.0+Typescript，你还没听说过？别慌，现在还来得及！",
}]);
const javaContent = ref<TabItem[]>([{
  label: "Java",
  icon: "i-vscode-icons:file-type-class",
  content: "引导你轻松迈入Java语言的世界，从基本概念到重点知识，再到实际入门案例。",
}]);

const allContents = computed(() => {
  return new Array<TabItem>().concat(vueContent.value, pythonContent.value, tsContent.value, javaContent.value);
})
const contentsMapping = computed<Record<string, TabItem[]>>(() => ({
  All: allContents.value,
  Vue: vueContent.value,
  Python: pythonContent.value,
  Typescript: tsContent.value,
  Java: javaContent.value,
}));
</script>

<template>
  <UTabs :items="tabInit">
    <template #default="{ item, selected }:UTabSlot">
      <div class="flex items-center gap-2 relative truncate">
        <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" dynamic />
        <span class="truncate">{{ item.label }}</span>
        <span v-if="selected" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400" />
      </div>
    </template>

    <template #item="{ item }:UTabSlot">
      <div class="flex flex-row basis-3/5 flex-shrink flex-wrap">
        <template v-for="(tab_item, t_index) in contentsMapping[item.label]" :key="`${tab_item}#${t_index}`">
          <Basement
            :label="tab_item.label"
            :icon-name="tab_item.icon"
            :content="tab_item.content!"
          />
        </template>
      </div>
    </template>
  </UTabs>
  <!-- <UHorizontalNavigation
    ref="hn"
    :links="links"
    class="border-b border-gray-200 dark:border-gray-800"
    :ui="{
      active:
        tw`text-gray-900 dark:text-white after:bg-green-500 dark:after:bg-primary-400 after:rounded-full`.join(
          ' ',
        ),
    }"
    @click="
      (event: PointerEvent) => {
        const targetLabel = (event.target as HTMLSpanElement).innerText;
        console.log('click', (event.target as HTMLSpanElement).innerText);
        // *只能通过对比label的方式来判断active 😢
        // 点key 这里需要获取index
        // for (let i = 0; i < links.length; i++) {
        //   if (links[i].label === targetLabel) {
        //     activeList[i] = true;
        //   } else {
        //     activeList[i] = false;
        //   }
        // }
        activeList = links.findIndex(
          (link, index) => link.label === targetLabel,
        ) as SelectLevelType;
        console.log('activeList', activeList);
      }
    "
  /> -->
</template>
